<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>jQuery Custom Animate</title>
		
		<style type='text/css'>
			div.container {
				width: 600px;
				height: 200px;
				margin-top: 15%;
				position: relative;
			}
			
			div.pic1 {
				background-image: url("./images/OANDBlackSaint.jpg");
			}
			
			div.pic2 {
				background-image: url("./images/OrnetteColemanTrioEmptyFoxhole.jpg");
			}
			
			div.pic3 {
				background-image: url("./images/DonCherryArtDeco.jpg");
			}
			
			div.images {
				width: 200px;
				height: 200px;
				position: relative;
				float: left;
			}
		</style>
		
		<script src="scripts/jquery-1.4.4.min.js"></script>
		<script type="text/javascript">
			jQuery(function() {
				$("#moveRight").click(function() {
					$("div.container").each(function() {
						var oriPosition = $(this).position().left;
						$(this).animate(
							{ left: oriPosition + 200 },  // 往右移200px
							"slow", 
							"linear"
						); // end of animate function
					}); // end of each function
				});
				
				$("#moveLeft").click(function() {
					$("div.container").each(function() {
						var initLeft = $(this).position().left;
						$(this).animate(
							{ left: initLeft - 200 },  // 往左移200px
							"fast",
							"swing"
						);  // end of animate function
							
					}); // end of each function
				});
				
				$("#moveTop").click(function() {
					$("div.container").each(function() {
						$(this).animate(
							{ top: $(this).position().top - 200 }, // 向上移動200px
							"slow",
							"linear"
						);  // end of animate function
					});  // end of each function
				});
				
				$("#moveBottom").click(function() {
					$("div.container").each(function() {
						$(this).animate(
							{ top: $(this).position().top + 200 }, // 向下移動200px
							"slow",
							"linear"
						);  // end of animate function
					});  // end of each function
				});
				
			});  // end of anonymous function for jQuery
			
		</script>
		
	</head>
	
	<body style="background-color:black">
		<div class="container">
			<div class="pic1 images"></div>
			<div class="pic2 images"></div>
			<div class="pic3 images"></div>
		</div>
		<button id="moveRight">move to right</button>&nbsp;
		<button id="moveLeft">move to left</button>&nbsp;
		<button id="moveTop">move to top</button>&nbsp;
		<button id="moveBottom">move to bottom</button>&nbsp;
	</body>
</html>
